import React, { useState } from 'react';

const Index = () => {
    //定义简单数据类型
    const [count, setCount] = useState(0)
    const [msg, setMsg] = useState("")
    /**
     * 定义复杂数据类型
    */
    const [arr, setArr] = useState(['html', 'css', 'js'])

    //事件：
    const handleArrClick = (e) => {
        setArr(() => {
            arr.push('vue')
            return [...arr]
        })
    }

    const handleChange = (e) => {
        console.log(e.target.value);
    }
    return (
        <div>
            <button onClick={() => { setCount(count + 1) }}>点击加一:{count}</button>
            <button onClick={handleArrClick}>点击添加'vue'</button>

            <h2>todolist</h2>
            <input type="text" value={msg} onChange={handleChange} />
            <p>{msg}</p>
        </div>
    );
}

export default Index;
